<template>
  <list-page
    v-model:list="goodsList"
    :requestParams="requestParams"
    :requestMethod="init"
    ref="listPageRef"
  >
    <template #default>
      <up-sticky :offsetTop="0" :customNavHeight="0">
        <view class="header-bg u-p-b-20">
          <view class="u-p-l-30 u-p-r-30">
            <up-search v-model="inputValue" placeholder="商品名称、分类等关键字" :clearabled="true" :showAction="false" @search="handleSearch" @clear="handleSearch"></up-search>
          </view>
        </view>
      </up-sticky>
      <view class="u-p-20" style="box-sizing: border-box;">
        <up-grid
          :border="false"
          :col="2"
          gap="20px"
        >
          <up-list-item v-for="(item, index) in goodsList" :key="index">
            <up-grid-item>
              <goods-item
                :data="item"
                type="vertical"
                size="calc(50vw - 20px)"
              ></goods-item>
            </up-grid-item>
          </up-list-item>
        </up-grid>
      </view>
    </template>
  </list-page>
</template>

<script>
import goodsItem from '@/components/goods-item/goods-item.vue';
export default {
  components: {
    goodsItem
  },
  data() {
    return {
      inputValue: '',
      goodsList: []
    }
  },
  computed: {
    requestParams() {
      return {
        categoryId: '',
        searchKey: this.inputValue,
      }
    }
  },
  onLoad(options) {
    this.inputValue = options.keyword || ''
  },
  onShow() {
    this.$nextTick(() => {
      this.reloadList()
    })
  },
  methods: {
    init(params) {
      return this.$api.goods.search(params)
    },
    reloadList() {
      this.$nextTick(() => {
        this.$refs.listPageRef.reset()
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.classify-content {
  width: 100%;
}
.left {
  width: 200rpx;
  height: 100%;
  border-right: 1rpx solid $u-border-color;
  overflow: scroll;
}
.right {
  flex: 1;
  height: 100%;
  padding: 0.1rpx;
  box-sizing: border-box;
}
</style>